<template>
  <el-form
      ref="addressFormRef"
      :model="addressForm"
      :rules="rules"
      label-width="120px"
      class="demo-addressForm"
      :size="formSize"
      status-icon
  >


    <el-form-item label="收货人" prop="name">
      <el-input v-model="addressForm.name" />
    </el-form-item>

    <el-form-item label="电话" prop="phone" >
      <el-input v-model="addressForm.phone" />
    </el-form-item>

    <el-form-item label="省"  prop="province">
      <el-input v-model="addressForm.province" />
    </el-form-item>

    <el-form-item label="市"  prop="city">
      <el-input v-model="addressForm.city" />
    </el-form-item>

    <el-form-item label="区/县"  prop="area">
      <el-input v-model="addressForm.area" />
    </el-form-item>

    <el-form-item label="镇"  prop="town">
      <el-input v-model="addressForm.town" />
    </el-form-item>

    <el-form-item label="村"  prop="village">
      <el-input v-model="addressForm.village" />
    </el-form-item>

    <el-form-item label="具体地址"  prop="specific">
      <el-input v-model="addressForm.specific" />
    </el-form-item>

    <el-form-item label="创建时间" prop="createTime" required>
      <el-date-picker
          v-model="addressForm.createTime"
          type="date"
          label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(addressFormRef)">
        创建
      </el-button>
      <el-button @click="resetForm(addressFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {AddressForm,AddressImpl} from "@/type/AddressAction";
import {addAddress} from "@/request/AddressService";

// ref 单个 变量 响应 对象
const formSize = ref('default')
const addressFormRef = ref<FormInstance>()
// 多个变量reactive 响应
const  addressForm = reactive(new AddressImpl()).addressform

const rules = reactive<FormRules<AddressForm>>({
//收货人
name: [
  // required: true 是否为必填项 trigger: 'blur' :失去焦点触发
  { required: true, message: '请输入收件人姓名', trigger: 'blur' },
  { min: 0, max: 20, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//电话
phone: [
  { required: true, message: '请输入联系电话', trigger: 'blur' },
  { min: 0, max: 20, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//省
province: [
  { required: true, message: '请输入省份', trigger: 'blur' },
  { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//市
city: [
  { required: true, message: '请输入市', trigger: 'blur' },
  { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//县/区
area: [
  { required: true, message: '请输入县/区', trigger: 'blur' },
  { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//镇
town: [
  { required: true, message: '请输入镇', trigger: 'blur' },
  { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//村
village: [
  { required: true, message: '请输入村', trigger: 'blur' },
  { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
],
//具体地址
specific: [
  { required: true, message: 'Please input address specific', trigger: 'blur' },
  { min: 0, max: 100, message: 'Length should be 0 to 100', trigger: 'blur' },
],
//创建时间
createTime: [
  {
    type: 'date',
    required: true,
    message: 'Please pick a date',
    trigger: 'change',
  },
],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      addressForm.createTime=JSON.stringify(addressForm.createTime).substring(1,20).replace("T"," ");
      //提交 局部刷新 then() 返回成功的时候调用
      addAddress(addressForm).then(
          function(response) {
            console.log(response);
            //response.data ==== 后台返回的对象 CommentReslut
            console.log("response.data = "+response.data);
            console.log("response.data.message = "+response.data.message);
            console.log("response.data.data = "+response.data.data);
          }
      )
      console.log('提交成功!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>

</style>